<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            background-image: url("https://img0.baidu.com/it/u=3943064272,3948814879&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            min-height: 100vh;
            width: 100vm;
        }

        em {
            width: 60px;
            height: 60px;
            position: relative;
            border-radius: 50%;
            margin: 0 5px;
            display: inline-block;
            background-color: #4da6e5;
            /* 50px 是阴影程度  5px 是偏移量*/
            box-shadow: 0 0 30px 5px #79bcec, 0 0 150px 5px #a6d2f2;
            /*animation: hd 5s linear infinite;*/
            animation: hd 3s linear infinite;
            animation-duration: calc(300s / var(--duration));
        }

        em:nth-of-type(even) {
            background-color: #df208f;
            box-shadow: 0 0 50px 5px #df208f,
            0 0 150px 5px #df208f;
        }

        @keyframes hd {
            from {
                transform: translateY(100vh) scale(0);
            }
            to {
                transform: translateY(-100vh) scale(1);
            }
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader {
            padding-left: 100px;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        #app {
            margin: auto;
            margin-top: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

        }
        .el-upload {
            margin-top: 70px;
            background-color: white;
            margin-left: 30%;
            border-radius: 50%;
        }

        .el-upload el-upload--text {
            background-color: white;
            border-radius: 50%;
            margin-left: 120px;
        }
    </style>
</head>
<body>
<div id="app" style="margin-left: 36%;">

    <div>

        <div style="padding-left: 150px">
            <el-avatar src="https://img.tukuppt.com/png_preview/00/24/92/hvbNX4j3lq.jpg%21/fw/780" :size="200"
                       fit="contain" class="image_1"></el-avatar>
        </div>

        <el-form label-width="100px" class="demo-ruleForm" style="padding-top: 100px;color: red"
                 :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
            <el-form-item :label="`用${'\u0020'}户${'\u0020'}名${'\u0020'} ${'\u0020'} `" prop="username" style="color: red">
                <el-input style="width: 280px" v-model="ruleForm.username" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item :label="`密${'\u3000'}${'\u3000'}码 `" prop="pass">
                <el-input type="password" style="width: 280px" v-model="ruleForm.pass" autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" style="width: 280px" v-model="ruleForm.checkPass" autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item :label="`电${'\u0020'}话${'\u0020'}号${'\u0020'} ${'\u0020'} `" prop="tel">
                <el-input style="width: 280px" v-model="ruleForm.tel" autocomplete="off" clearable></el-input>
            </el-form-item>
            <template>
                <el-button type="text" @click="open" style="padding-left: 300px"> 添加邮箱</el-button>
            </template>
        </el-form>
        <el-button style="margin-top: 12px; margin-left: 500px" @click="submitForm('ruleForm')"> 完成</el-button>
    </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",

        data() {
            var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
            var mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            var uPattern = /^[a-zA-Z0-9]{3,16}$/;
            var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else{
                    if (pPattern.test(value)==false){
                        new callback(new Error("密码最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符"))
                    }else {
                        if (this.ruleForm.checkPass !== '') {
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                }
            };
            var validatePass3=(rule,value,callback)=> {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    if (uPattern.test(value) == false) {
                        new callback(new Error("3到16位(字母，数字)"));
                    }else {
                        callback();
                    }
                }

            };
                var validatePass4=(rule,value,callback)=> {
                    if (value === '') {
                        callback(new Error('请输入手机号码'));
                    } else {
                        if (mPattern.test(value) == false) {
                            new callback(new Error("请输入正确的手机号码"));
                        } else {
                            callback();
                        }
                    }

                };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                imageUrl: '',
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    tel: '',
                    username: ''
                },
                dynamicValidateForm: {
                    domains: [{
                        value: ''
                    }],
                    email: ''
                },
                rules: {
                    pass: [
                        {required: true, validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {required: true, validator: validatePass2, trigger: 'blur'}
                    ],
                    username: [
                        {required: true,validator: validatePass3, trigger: 'blur'}
                    ],
                    tel: [
                        {required: true,validator: validatePass4, trigger: 'blur'}
                    ]
                },
                eml: ""

            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios({
                            url: "../UserLogon.s",
                            params: {
                                tel: this.ruleForm.tel,
                                username: this.ruleForm.username,
                                pass: this.ruleForm.pass,
                                email: this.eml,
                            }
                        }).then(res => {
                            this.$message(res.data.msg);
                            if (res.data.code == 1) {
                                window.history.back(-1);
                            }
                        })
                    } else {
                        this.$message("输入有误");
                        return false;
                    }
                });
            },
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            addDomain() {
                this.dynamicValidateForm.domains.push({
                    value: '',
                    key: Date.now()
                });
            },
            open() {
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({value}) => {
                    this.$message({
                        type: 'success',
                        message: '你的邮箱是: ' + value,
                    });
                    this.eml = value;
                    console.log(this.eml);
                    console.log(this.ruleForm)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            }
        }
    });

</script>
<script type="module">
    for (let i = 0; i < 100; i++) {
        const el = document.createElement('em')
        el.style.cssText =
            `--duration:` + (Math.random() * 50 + 10)
        document.body.appendChild(el)
    }
</script>
</body>
</html>